<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 盒子边框 */
        div {
            border: 1px solid;
        }

        /* 第一个盒子属性 */
        .first {
            height: 140px;
            width: 1200px;
            position: relative;
        }

        /* 第一个盒子左 */
        .first .first_l {
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 75%;
        }

        /* 第一个盒子右 */
        .first .first_r {
            /* background-color: rgba(232, 14, 14, 0.984); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 25%;
            right: 0;
        }

        /* 第一个盒子右上 */
        .first .first_r .first_r_t {
            /* background-color: aquamarine; */
            position: absolute;
            left: 0;
            right: 0;
            height: 100px;
        }

        /* 第一个盒子右上左 */
        .first .first_r_t_l {
            /* background-color: rgb(8, 27, 239); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 30%;
            text-align: center;
        }

        /* 第一个盒子右上右 */
        .first .first_r_t_r {
            /* background-color: rgba(232, 14, 14, 0.984); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 70%;
            right: 0;
            text-align: center;
            color: red;
        }

        /* 第一个盒子右下 */
        .first .first_r .first_r_b {
            /* background-color: rgb(146, 255, 127); */
            position: absolute;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
        }

        /* 第一个盒子右下1 */
        .first .first_r .first_r_b .first_r_b_1 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 90%;
        }

        /* 第一个盒子右下2 */
        .first .first_r .first_r_b .first_r_b_2 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10%;
            right: 80%;
        }

        /* 第一个盒子右下3 */
        .first .first_r .first_r_b .first_r_b_3 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 20%;
            right: 70%;
        }

        /* 第一个盒子右下4 */
        .first .first_r .first_r_b .first_r_b_4 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 30%;
            right: 60%;
        }

        /* 第一个盒子右下5 */
        .first .first_r .first_r_b .first_r_b_5 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 40%;
            right: 50%;
        }

        /* 第一个盒子右下6 */
        .first .first_r .first_r_b .first_r_b_6 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            right: 40%;
        }

        /* 第一个盒子右下7 */
        .first .first_r .first_r_b .first_r_b_7 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 60%;
            right: 30%;
        }

        /* 第一个盒子右下8 */
        .first .first_r .first_r_b .first_r_b_8 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 70%;
            right: 20%;
        }

        /* 第一个盒子右下9 */
        .first .first_r .first_r_b .first_r_b_9 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 80%;
            right: 10%;
        }

        /* 第一个盒子右下10 */
        .first .first_r .first_r_b .first_r_b_10 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 90%;
            right: 0;
        }

        /* 第二个盒子属性 */
        .sec {
            height: 500px;
            width: 1200px;
            position: relative;
        }

        /* 第二个盒子左 */
        .sec .sec_l {
            /* background-color: rgb(58, 175, 50); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 84%;
        }

        /* 第二个盒子左上下边距 */
        .sec_l_1 {
            height: 2%
        }

        /* 第二个盒子左18 */
        .sec_l_2 {
            height: 5.4%
        }

        /* 第二个盒子中 */
        .sec .sec_c {
            /* background-color: rgb(121, 44, 6); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 16%;
            right: 25%;
        }

        /* 第二个盒子右 */
        .sec .sec_r {
            /* background-color: rgba(219, 19, 145, 0.984); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 75%;
            right: 0;
        }

        /* 第二个盒子右上 */
        .sec .sec_r .sec_r_t {
            /* background-color: rgba(219, 19, 145, 0.984); */
            position: absolute;
            top: 0;
            bottom: 80%;
            left: 0;
            right: 0;
            text-align: center;
        }

        /* 第二个盒子右中上 */
        .sec .sec_r .sec_r_ct {
            /* background-color: rgba(178, 233, 13, 0.984); */
            position: absolute;
            top: 20%;
            bottom: 60%;
            left: 0;
            right: 0;
        }

        /* 第二个盒子右中下 */
        .sec .sec_r .sec_r_cb {
            /* background-color: rgba(4, 138, 255, 0.984); */
            position: absolute;
            left: 0;
            right: 0;
            top: 40%;
            bottom: 5%
        }

        /* 第二个盒子右下 */
        .sec .sec_r .sec_r_b {
            /* background-color: rgba(2, 245, 188, 0.984); */
            position: absolute;
            top: 95%;
            bottom: 0;
            left: 0;
            right: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 13px;
            font-size: 14px;
            font-weight: 200;
        }

        .photo_1 {
            width: 250px;
            position: relative;
            left: 20px;
        }

        input {
            width: 450px;
            vertical-align: center;
            border: 0px;
            outline: 3px solid red;
        }

        .photo_2 {
            position: relative;
            left: 30px;
        }

        code {
            background-color: rgba(242, 225, 225, 0.61);
            color: red;
            font-weight: 400;
        }

        .plus {
            position: absolute;
            left: 3px;
            right: 3px;
            top: 6%;
            background-color: rgba(253, 230, 98, 0.699);
            border-radius: 5px;
            height: 42px;
        }

        .qiye {
            position: absolute;
            left: 3px;
            right: 3px;
            bottom: 6%;
            background-color: rgba(98, 201, 253, 0.637);
            border-radius: 5px;
            height: 42px;
        }

        span{
            font-weight: 200;
        }

        .left {
            position: absolute;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="first">
        <div class="first_l">
            <img src="./jd.png" alt="jd" class="photo_1">
        </div>
        <div class="first_r">
            <div class="first_r_t">
                <div class="first_r_t_l">
                    <input type="text" placeholder="手机">
                </div>
                <div class="first_r_t_r">
                    我的购物车
                </div>
            </div>
            <div class="first_r_b">
                <div class="first_r_b_1">京东生鲜</div>
                <div class="first_r_b_2">京东家电</div>
                <div class="first_r_b_3">秒杀</div>
                <div class="first_r_b_4">京东超市</div>
                <div class="first_r_b_5">京东手机</div>
                <div class="first_r_b_6">进口好物</div>
                <div class="first_r_b_7">京东五金城</div>
                <div class="first_r_b_8">拍卖</div>
                <div class="first_r_b_9">便宜包邮</div>
                <div class="first_r_b_10">电脑数码</div>
            </div>
        </div>
    </div>
    <br>
    <div class="sec">
        <div class="sec_l">
            <div class="sec_l_1"></div>
            <div class="sec_l_2">家用电器</div>
            <div class="sec_l_2">手机/运营商/数码</div>
            <div class="sec_l_2">电脑/办公/文具用品</div>
            <div class="sec_l_2">家居/家具/家装/厨具</div>
            <div class="sec_l_2">男装/女装/童装/内衣</div>
            <div class="sec_l_2">美妆/个护清洁/宠物</div>
            <div class="sec_l_2">女鞋/箱包/钟表/珠宝</div>
            <div class="sec_l_2">男鞋/运动/户外</div>
            <div class="sec_l_2">房产/汽车/汽车用品</div>
            <div class="sec_l_2">母婴/玩具乐器</div>
            <div class="sec_l_2">食品/酒类/生鲜/特产</div>
            <div class="sec_l_2">艺术/礼品鲜花/农牧园艺</div>
            <div class="sec_l_2">京东买药/计生情趣</div>
            <div class="sec_l_2">图书/文娱/教育/电子书</div>
            <div class="sec_l_2">机票/酒店/旅游/生活</div>
            <div class="sec_l_2">支付/白条/保险/企业金融</div>
            <div class="sec_l_2">安装/维修/清洗/二手</div>
            <div class="sec_l_2">五金机电/元器件</div>
            <div class="sec_l_1">

            </div>
        </div>

        <div class="sec_c">
            <img src="./q.jpg" alt="w" height="500" class="photo_2">
        </div>

        <div class="sec_r">

            <div class="sec_r_t">
                <img src="./hi.png" alt="hi" class="photo_3"><br>Hi~欢迎逛京东！
            </div>

            <div class="sec_r_ct">
                <div class="plus">
                    <strong>plus会员</strong> <span class="left">立即开通></span><br>
                    <span>专享立减</span>
                </div>

                <div class="qiye">
                    <strong>企业会员</strong> <span class="left">立即开通></span><br>
                    <span>新人采购至高补贴1240元</span>
                </div>
            </div>
            <div class="sec_r_cb">
                <ul>
                    <li>
                        <a href="https://b.jd.com/">
                            <i class="service_ico">
                                <img src="https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png">
                            </i> 
                        </a><span>企业购</span>
                    </li>
                </ul>
            </div>
            <div class="sec_r_b">
                <code>资讯</code> 刘文强：我国工业绿色发展取得七个方面重大成就
            </div>
        </div>
    </div>
</body>

</html>